
<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
		<script src="js/rem.js"></script>
	</head>
	<style type="text/css">
		body,html{
			background: #FFFFFF;
		}
		.content > img{
			width: .6rem;
			display: block;
			margin: 20px auto;
		}
		.list{
			width: 100%;
			height: 2.6rem;
			padding: .3rem .1rem;
			box-sizing: border-box;
			border-bottom: 1px solid #CCCCCC;
		}
		.list > img{
			width: 4rem;
			height: 100%;
		}
		.list > div{
			float: right;
			width: 3rem;
			height: .3rem;
			line-height: .3rem;
		}
		.list > div >  div{
			width: 100%;
			height: .5rem;
			font-size: 14px;
			line-height: .3rem;
			position: relative;
		}
		.list > div >  div > img{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: .3rem;
			height: .3rem;
		}
		.list > div >  div > span{
			position: absolute;
			top: 50%;
			left: .4rem;
			transform: translateY(-50%);
			width: .8rem;
			height: .3rem;
		}
	</style>
	<body>
		<div class="content">
			<img src="images/upload.png"/>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<a href="" class="mui-tab-item mui-active">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a href="" class="mui-tab-item">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">信息</span>
			</a>
			<a href="" class="mui-tab-item">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a>
		</nav>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
			$.ajax({
				url:"http://huiben.node4.yanxishe.cc/api/portal/articles?userid=3",
				dataType:"json",
				success:function(res){
					console.log("success")
					console.log(res)
					console.log(res.data[0].more.photos[0].url)
					console.log(res.data[0].post_title)
					console.log(res.data[0].published_time)
					console.log(res.data[0].user_login)
					console.log(res.data[0].id)
					var xx="https://huiben.node4.yanxishe.cc/upload/"
					var arr=[]
					$(".content").empty()
					for (var i=0;i<res.data.length;i++) {
						arr=[]
						var middle=`<div class="list">
							<img src="https://huiben.node4.yanxishe.cc/upload/${res.data[i].more.photos[0].url}"/>				
							<div>
								<div>${res.data[i].post_title}</div>
								<div>
									<img src="images/time.png"/>
									<span>${res.data[i].published_time}</span>
								</div>
								<div>
									<img src="images/address.png"/>
									<span>${res.data[i].user_login}</span>
								</div>
								<div>
									<img src="images/eye.png"/>
									<span>${res.data[i].id}</span>
								</div>
							</div>				
						</div>`
//						console.log(middle)
						arr.push(middle)
						$(".content").before(arr.toString())
					}
					console.log(arr)
//					$(".content").html(arr.join())
				}
			})
			console.log(1111111)
			var arr = [1,2,3];
			var str = arr.join("+"); 
			console.log(str)
		</script>
	</body>

</html>